.item-right {
  margin-left: 16px
}

.chart-list {

  height: 100%;
  display: flex;
  flex-direction: column;
  
  .accordion-wrapper{
    flex:1;
    overflow-y: scroll;
    margin-top:5px;
  //   .list-item{ 
  //   // background-color: aqua;
  //   border-bottom: #EDF2F9 solid 1px;
  // }
  // .name-bot{ border-bottom: #dfe4ec solid 1px !important;
  // margin-bottom: 12px; }
  }
  
  .ant-collapse-borderless{
    background-color: transparent;
  }
  .ant-collapse {
    margin-top: 12px;
    margin-right: 0;
    .ant-collapse-header{
      padding: 4px 16px;
      padding-left: 34px;;
      padding-right: 12px;
      .ant-collapse-arrow{
        font-size: 8px;
      }
      .option{
        display: none;
        span + span{
          margin-left: 6px;
        }
      }
      &:hover{
        .option{
          display: block;
        }
      }
    }
    .ant-collapse-item{
      border:none
    }
    .ant-collapse-content-box{
      background-color: transparent;
      padding-right: 0;
    }
    
    
  }
  .chat-list-group-item{
    .chat-list-group-title{
      background-color: #EDF2F9;
      padding-left: 20px;
      font-size: 14px;
      color: #666;;
      height: 36px;
      line-height: 39x;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .action{
        margin-right: 12px;
      }
    }
  }
  .list-item {
    padding: 4px 34px;
    padding-left: 20px;
    cursor: pointer;
    -webkit-user-drag: none;
    margin-top: 10px;
    -webkit-user-drag: none;
 
    .name{
      // color: #2C2F36;
      color: #2a2a2e;
      display: block;
      .ant-badge{ top:-10px;}
      
    }
    svg{
      margin-right: 5px;
      // width: 30px !important;
      // height: 30px !important;
    }

  }
  .list-item + .list-item{
    margin-top: 0;
    padding-bottom: 10px;
  }
  .userphoto i {
    margin: 0 !important
  }
}

.list-new-item {
  display: flex;
  position: relative;
  align-items: center;
  padding: 0 16px;
  overflow: hidden;
  flex: 1;
  border: none;
  border-bottom: 1px solid #EFEFEF;
  -webkit-user-drag: none;
  .friend-name {
        margin-left: 6px;
    flex: 1;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    // color: #2C2F36;
    color: #2a2a2e;
  }
  img{
    -webkit-user-drag: none;
  }
  .opt{
    position: absolute;
    right: 10px;
    display: none;
    color:#666;
  }
  &:hover {
    background: #eeeff2;
    .opt{
      display: block;
    }
  }
}
#contact-myfriend-list,#contact-newfriend-list{
  border: none;
}


#contact-myfriend-list.ant-collapse-item-active {
  height: calc(100% - 92px);

  .ant-collapse-content {
    height: 100%;
  }

  .ant-collapse-content-box {
    padding-right: 0px;
    height: 100%;
  }
}

.chart-list-group{
  .ant-collapse{
    margin-top: 0;
  }
 
}
